<template>
    <div class="wrap">
        <div class="container">
            <TopBreadCrumb></TopBreadCrumb>
            <div class="user_center_content">
                <!-- 左侧菜单 -->
                <LeftNavMenu></LeftNavMenu>
                <!-- 左侧菜单结束 -->
                <!-- 右侧内容开始  -->
                <div class="right_user_content">
                    <div class="right-title border-bottom">
                        <div class="title">订单详情</div>
                    </div>
                    <div class="order_content">
                        <div class="order_content_show">      
                            <!-- 订单详情-商品 -->
                            <div class="order_goods_content">
                                <div class="order_goods_list" v-for="(goods,index) in model.item" :key="index">
                                    <div class="order_goods_info">
                                        <div class="order_goods_img">
                                            <img :src="$commonImageUrl(goods.goods_image)">
                                        </div>
                                        <div class="goods_spec_info">
                                            <div class="goods_name">{{goods.goods_title}}</div>
                                            <div>型号：{{goods.goods_sku_name}}</div>
                                            <div>规格：{{goods.goods_sku_text}}</div>
                                            <div>备注：{{goods.goods_remark}}</div>
                                        </div>
                                    </div>
                                    <div class="company_name">{{goods.factory_name}}</div>
                                    <div class="goods_price">￥{{goods.goods_price}}</div>
                                    <div class="car_num_operate">{{goods.goods_num}}</div>
                                    <div class="goods_price_all">￥{{goods.pay_price}}</div>
                                </div>
                            </div>
                            <!-- 收货信息 -->
                            <div class="order-info-content">
                                <div class="order-title">收货信息</div>
                                <div class="order-info">
                                    <ul>
                                        <li><span>收货人</span>张三</li>
                                        <li><span>收货地址</span>北京市朝阳区清河营东路88号</li>
                                        <li><span>联系电话</span>15915815715</li>
                                    </ul>
                                </div>
                            </div>
                            <!-- 订单信息 -->
                            <div class="order-info-content">
                                <div class="order-title">订单信息</div>
                                <div class="order-info">
                                    <ul>
                                        <li><span>订单号</span>{{model.order_sn}}</li>
                                        <li><span>订单时间</span>{{model.create_time}}</li>
                                        <li><span>订单状态</span>{{model.status_name}}</li>
                                        <li><span>订单备注</span>{{model.remark}}</li>
                                    </ul>
                                </div>
                            </div>
                            <!-- 商品总价 -->
                            <div class="order-price-all">
                                <div class="price-all">
                                    <p><span>商品总价：</span><span>￥{{model.total_amount}}</span> </p>
                                    <p><span>运费(快递)：</span><span>￥{{model.dispatch_amount}}</span> </p>
                                    <p class="text-blue"><span>实付总额：</span><span>￥{{model.pay_fee}}</span> </p>
                                </div>
                            </div>
                            <!-- <div class="btn-group">
                                <el-button  class="btn-white"    round @click="openDialogCancelVisible">取消订单</el-button>
                                <el-button  class="btn-main"     v-if="status_code == 'nopay' || status_code == 'payed'"  round  @click="openDialogReceiptVisible">上传付款回执</el-button>
                                <el-button  class="btn-main"     v-if="status_code == 'nocheck'"  round>提醒审核</el-button>
                                <el-button  class="btn-white"    v-if="status_code == 'nocheck'" round @click="openDialogRefundVisible">退款申请</el-button>
                                <el-button  class="btn-main"     round>提醒发货</el-button>
                                <el-button  class="btn-main"     round>确认收货</el-button>
                                <el-button  class="btn-white"    round>申请售后</el-button>
                                <el-button  class="btn-main"     round>再次购买</el-button>
                                <el-button  class="btn-main"     round>重新下单</el-button>
                                <el-button  class="btn-main"     round>联系客服</el-button>
                            </div> -->
                            <!--待审核-->
                            <div class="btn-group">
                                <el-button  class="btn-white" round @click="refundApply">退款申请</el-button>
                                <el-button  class="btn-white" round  @click="openDialogCancelVisible">取消订单</el-button>
                                <el-button  class="btn-main"  round  @click="onSumbitReview">提醒审核</el-button>
                            </div>
                            <!--待付款 待发货-->
                            <!-- <div class="btn-group" v-if="status_code == 'nopay' && status_code =='nosend' ">
                                <el-button  class="btn-white" round  @click="openDialogCancelVisible">取消订单</el-button>
                                <el-button  class="btn-main"  round  @click="openDialogReceiptVisible">上传付款回执</el-button>
                            </div> -->
                            <!--待付款 待收货-->
                            <!-- <div class="btn-group" v-if="status_code == 'nopay' && status_code =='noget' ">
                                <el-button  class="btn-main"  round>确认收货</el-button>
                                <el-button  class="btn-main"  round  @click="openDialogReceiptVisible">上传付款回执</el-button>
                            </div> -->
                            <!--已付款 待发货-->
                            <!-- <div class="btn-group" v-if="status_code == 'payed' && status_code =='nosend' ">
                                <el-button  class="btn-white" round @click="openDialogRefundVisible">退款申请</el-button>
                                <el-button  class="btn-main"     round>提醒发货</el-button>
                            </div> -->
                            <!--已付款 待收货-->
                            <!-- <div class="btn-group" v-if="status_code == 'payed' && status_code =='noget' ">
                                <el-button  class="btn-white" round @click="openDialogRefundVisible">退款申请</el-button>
                                <el-button  class="btn-main"  round>确认收货</el-button>
                            </div> -->
                             <!--已完成-->
                             <!-- <div class="btn-group" v-if="status_code == 'payed' && status_code =='noget' ">
                                <el-button  class="btn-white" round @click="openDialogRefundVisible">退款申请</el-button>
                                <el-button  class="btn-main"  round>确认收货</el-button>
                            </div> -->
                        </div>
                    </div>
                </div>
                <!-- 右侧内容结束 -->
            </div>
        </div>

        <!-- 取消订单弹窗 -->
        <el-dialog
            title="取消订单"
            :visible.sync="dialogCancelVisible"
            width="35%"
            :close-on-click-modal="false"
            top="7%">
            <div class="dialog-content">
                <el-form ref="form" :model="form" label-width="150px" label-position="left">
                    <el-form-item label="取消理由" required="">
                        <el-select v-model="form.reason" placeholder="请选择取消订单的理由">
                            <el-option :label="item" :value="item" v-for="(item, index) in reasonList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" class="cancel-text">
                        <span class="el-icon-warning"></span>您确定要取消订单吗？取消订单后不能恢复。
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn-main" @click="onSubmitCancel">确定</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </el-dialog>
        <!-- 取消订单弹窗 结束 -->

         <!-- 上传付款回执弹窗 -->
         <el-dialog
            title="上传付款回执"
            :visible.sync="dialogReceiptVisible"
            width="35%"
            :close-on-click-modal="false"
            top="2%">
            <div class="dialog-content payment-receipt">
               <div class="title">企业信息</div>
               <div class="item">
                   <p><span>账号名称</span>北京鑫康辰医学科技发展有限公司</p>
                   <p><span>开户银行</span>中国农业银行北京经济技术开发区支行</p>
                   <p><span>银行账号</span>11221201040008406</p>
               </div>
               <div class="title">订单信息</div>
               <div class="item">
                   <p><span>订单详情</span>同种异体肌腿 x10EH复合材料(颅领优) x10</p>
                   <p><span>订单号</span>220109193821-OTUK-1-0114674</p>
                   <p><span>订单时间</span>2022-03-1515:29:02</p>
                   <p><span>订单总额</span>￥5700.00</p>
               </div>
               <div class="title">支付信息</div>
               <el-form ref="form" :model="form" label-width="150px" label-position="left">
                    <el-form-item label="使用余额支付">
                        <el-input v-model="form.balance" placeholder=""></el-input>
                        <span class="el-icon-warning text-grey"></span> <span class="text-grey">账户剩余余额: ￥4150.00</span>
                    </el-form-item>
                    <el-form-item label="还需付款金额">
                        <el-input v-model="form.name" placeholder="￥5700.00"></el-input>
                    </el-form-item>
                    <el-form-item label="上传付款回执">
                        <CustomImageUpload v-model="form.remaining"></CustomImageUpload>
                        <span class="text-grey">支持pdf、jpg、png格式文件大小不超过5MB</span>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn-main" @click="onSubmit">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <!-- 上传付款回执 结束 -->

        <!-- 退款申请弹窗 -->
        <el-dialog
            title="退款申请"
            :visible.sync="dialogRefundVisible"
            width="35%"
            :close-on-click-modal="false"
            top="7%">
            <div class="dialog-content">
                <div class="apply-head">
                    <span>产品</span>
                    <span>选择数量</span>
                </div>
                <div class="refund-goods justify-content">
                    <div class="list flex align-center justify-content">
                        <div class="order_goods_info align-center">
                            <div class="order_goods_img">
                                <img src="@/assets/images/img.png">
                            </div>
                            <div class="goods_spec_info">
                                <div class="goods_name">同种异体肌腱</div>
                                <div>型号：150680431530</div>
                                <div>规格：200x20x5mm</div>
                                <div>备注：多种产品规格满足临床不同需求</div>
                            </div>
                        </div>
                        <div class="order_goods_num">
                            <el-input v-model="goods_num" size="mini" ></el-input>
                        </div>
                    </div>
                    <div class="list flex align-center justify-content">
                        <div class="order_goods_info align-center">
                            <div class="order_goods_img">
                                <img src="@/assets/images/img.png">
                            </div>
                            <div class="goods_spec_info">
                                <div class="goods_name">同种异体肌腱</div>
                                <div>型号：150680431530</div>
                                <div>规格：200x20x5mm</div>
                                <div>备注：多种产品规格满足临床不同需求</div>
                            </div>
                        </div>
                        <div class="order_goods_num">
                            <el-input v-model="goods_num" size="mini" ></el-input>
                        </div>
                    </div>
                </div>
                <div class="refund-bottom">
                    <el-select v-model="select_val">
                        <el-option :label="item.label" :value="item.value" v-for="(item, index) in reasonList" :key="index"></el-option>
                    </el-select>
                    <el-button class="btn-main" @click="onSubmit">确定</el-button>
                </div>

                    
            </div>
        </el-dialog>
        <!-- 退款申请 结束 -->

    </div>
</template>

<script>
import api from "@/api/order"
export default {
    props: {
        //订单ID
        id: {
            type: String,
            default: 0,
        }
    },
    data() {
        return {
            dialogCancelVisible: false,
            dialogReceiptVisible: false,
            dialogRefundVisible:false,
            model: {}, //详情
            form: {},
            reasonList: [],
            goods_num: 0,
            select_val: ""
        };
    },
    methods: {
        LoadData() { 
            let input = {
                id: this.id,
            }
            api.GetOrderInfo(input)
                .then((res) => {
                    this.model = res.data;
                    console.log("res",res)
            })
        },
        LoadCancelOrderType: function () {
            api.GetOrderReasonType()
                .then((res) => {
                    // console.log(res);
                    this.reasonList = res.data;
                });
        },
        // 退款申请
        refundApply: function () {
            var input = {
                type: "refund",
                order_id: this.model.id,
                order_item: [
                    {
                        stock_id: 32,
                        goods_num: 1
                    }
                ]
            }
            api.OrderApplyRefundFirst(input)
                .then((res) => {
                    console.log("第一步调用结果", res.data);
                    input.reason = "不要了";
                    input.content = "不想要了";
                    input.images = "/uploads/20231024/741870b3d2acb362c13a79fd4744ffa5.png";
                    input.batch_number = "1";
                    input.serial_number = "2";
                    input.goods_status = 0;
                    input.refund_money = res.data.order_refund_money;
                    input.sub_order_id = 11;
                    api.OrderApplyRefundSecond(input)
                        .then((res) => {
                            this.$message.success(res.msg);
                        })
                })
        },
        openDialogRefundVisible: function () {
            this.dialogRefundVisible = true;
        },
        openDialogReceiptVisible: function () { 

        },
        openDialogCancelVisible: function () { 
            this.dialogCancelVisible = true;
        },
        //取消订单
        onSubmitCancel() {
            var input = {
                id: this.model.id,
                ruefund_reason: this.form.reason
            }
            api.Cancel(input).then((res) => {
                this.$message({
                    type: 'success',
                    message: res.msg
                });
            })
        },
        //提醒审核
        onSumbitReview() {
            this.$confirm('订单编号：' + this.model.order_sn, '审核提醒', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
            }).then(() => {
                let input = {
                    id: this.model.id
                };
                api.Examine(input).then((res) => { 
                    this.$message({
                        type: 'success',
                        message: res.msg
                    });
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消'
            });          
            });
        },
        //提醒发货
        onSumbitDelivery() { 
            this.$confirm('订单编号：' + this.model.order_sn, '提醒发货', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
            }).then(() => {
                let input = {
                    id: this.model.id
                };
                api.Delivery(input).then((res) => { 
                    this.$message({
                        type: 'success',
                        message: res.msg
                    });
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消'
            });          
            });
        },
        //删除订单
        onSumbitDelete() { 
            this.$confirm('订单编号：' + this.model.order_sn, '删除订单', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
            }).then(() => {
                let input = {
                    id: this.model.id
                };
                api.Delete(input).then((res) => { 
                    this.$message({
                        type: 'success',
                        message: res.msg
                    });
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消'
            });          
            }); 
        },
        //确认收货
        onSumbitConfirm() {
            this.$confirm('订单编号：' + this.model.order_sn, '确认收货', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
            }).then(() => {
                let input = {
                    id: this.model.id
                };
                api.Confirm(input).then((res) => { 
                    this.$message({
                        type: 'success',
                        message: res.msg
                    });
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消'
            });          
            }); 
        },
        onSubmit() { },
    },
    mounted: function () {
        console.log("组件的id",this.id)
        this.LoadData();
        this.LoadCancelOrderType();
    }
};
</script>
<style>


</style>